import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:ati_package/core/routes/app_routes.dart';
import 'package:ati_package/core/utils/ati_font.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../core/utils/ati_color.dart';

class UserOrderRecordView extends StatefulWidget {
  const UserOrderRecordView({super.key});

  @override
  State<UserOrderRecordView> createState() => _UserOrderRecordViewState();
}

class _UserOrderRecordViewState extends State<UserOrderRecordView>
    with SingleTickerProviderStateMixin {
  TabController? tabController; // safer: allow null briefly
  final List<String> tabs = ['全部', '待发货', '待收货', '已完成'];

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  void dispose() {
    tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      title: '兑换记录',
      body: Column(
        children: [
          buildTabBar(),
          Expanded(
            // 👈 关键，让 TabBarView 填满剩余空间
            child: TabBarView(
              controller: tabController,
              children: [
                buildListContent('热门兑换内容'),
                buildListContent('热门兑换内容'),
                buildListContent('热门兑换内容'),
                buildListContent('热门兑换内容'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  buildTabBar() {
    return Material(
      color: Colors.transparent,
      child: Container(
        height: 35.r,
        margin: EdgeInsets.symmetric(horizontal: 16.r, vertical: 12.5.r),
        child: TabBar(
          onTap: (value) {},
          controller: tabController,
          isScrollable: true,
          indicator: BoxDecoration(),
          tabAlignment: TabAlignment.start,
          dividerColor: Colors.transparent,
          indicatorColor: Colors.transparent, // 我们自己画 indicator
          splashFactory: NoSplash.splashFactory,
          overlayColor: WidgetStateProperty.all(Colors.transparent),
          labelPadding: EdgeInsets.only(
            right: 10.r,
            // top: 10.r,
          ), // ⚠️ 去掉 TabBar 自带 padding
          tabs: tabs.map((title) {
            final isSelected =
                tabController?.index == tabs.indexOf(title); // 当前是否选中

            return Tab(
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 17.5.r,
                  vertical: 5.r,
                ), // ✅ 文字与边距
                decoration: BoxDecoration(
                  color: isSelected ? AtiColor.primary : Colors.white,
                  borderRadius: BorderRadius.circular(20.r),
                ),
                child: Text(
                  title,
                  style: TextStyle(
                    fontSize: 14.r,
                    fontWeight: FontWeight.w600,
                    color: isSelected ? Colors.white : AtiColor.textColor1,
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  Widget buildListContent(String title) {
    return Container(
      margin: EdgeInsets.only(left: 16.r, right: 16.r),
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.only(
              top: 8.r,
              bottom: 10.r,
              left: 16.r,
              right: 16.r,
            ),
            margin: EdgeInsets.only(bottom: 12.r),

            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.r),
            ),

            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      '订单：356789674489499',
                      style: TextStyle(
                        fontSize: AtiFont.font10,
                        color: Color(0xFF666666),
                      ),
                    ),
                    Spacer(),
                    Text(
                      '待发货',
                      style: TextStyle(
                        fontSize: AtiFont.font12,
                        color: AtiColor.textColor1,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 8.r),
                Row(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://picsum.photos/800/400?blur', // 👈 网络图片URL
                        width: 82.r,
                        height: 82.r,
                        fit: BoxFit.cover, // 保持比例填充
                        placeholder: (context, url) =>
                            const CircularProgressIndicator(), // 加载中
                        errorWidget: (context, url, error) =>
                            const Icon(Icons.error), // 加载失败
                      ),
                    ),
                    SizedBox(width: 10.r),
                    Flexible(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(
                            '直奔竞价适合吃素的呢140ml',
                            style: TextStyle(
                              fontSize: AtiFont.font14,
                              color: AtiColor.textColor1,
                            ),
                          ),
                          SizedBox(height: 30.r),
                          Row(
                            children: [
                              Text.rich(
                                TextSpan(
                                  children: [
                                    TextSpan(
                                      text: '23480积分',
                                      style: const TextStyle(
                                        color: Colors.green,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 15,
                                      ),
                                    ),
                                    const TextSpan(
                                      text: " 积分",
                                      style: TextStyle(
                                        color: Colors.green,
                                        fontSize: 13,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Spacer(),
                              Text(
                                '复制单号',
                                style: TextStyle(
                                  fontSize: AtiFont.font10,
                                  color: Color(0xFFFFA900),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ).addTapGesture(
            onTap: () {
              Get.toNamed(AtiAppRoutes.userOrderRecordDet);
            },
          );
        },
      ),
    );
  }
}
